<template>
  <div>
    <h2>vue.extend()的用法和全局组件的使用</h2>
    <el-button type="primary" @click="btn1">调用全局Dialog组件</el-button>
    <el-button type="primary" @click="btn2">调用extend封装的全局自定义组件Dialog方法</el-button>
    <el-button type="primary" @click="btn3">调用extend封装的全局自定义组件message方法</el-button>
    <el-button type="primary" @click="btn4">点击构建extend创造器并挂载元素</el-button>
    <Dialog :visible.sync="dialogVisible" title="我是标题" content="我是内容">
      <!-- 传入插槽内容 -->
       <el-table :data="gridData">
          <el-table-column property="date" label="日期" width="150"></el-table-column>
          <el-table-column property="name" label="姓名" width="200"></el-table-column>
          <el-table-column property="address" label="地址"></el-table-column>
        </el-table>
    </Dialog>

    <!-- 使用extend -->
    <h2>vue.extend构造出来的新组件：</h2>
    <div id="container"></div>
  </div>
</template>

<script>
/**
 *
 * 直接从vue引入vue : import Vue from 'vue'
 * 问题：You are using the runtime-only build of Vue where the template compiler is not available.
 *       Either pre-compile the templates into render functions, or use the compiler-included build.
 *
 * 原因：vue有两种形式的代码 compiler（模板）模式和runtime模式（运行时），vue模块的package.json的main字段默认为runtime模式， 指向了   "dist/vue.runtime.common.js"位置。
 *
 * 解决方法一：import Vue from 'vue/dist/vue.esm.js'
 * 解决方法二：在vue.config.js文件里加上webpack的如下配置 configureWebpack
 * 解决方法三：在main.js把 compiler 模式改为 runtime 模式。(作者说他之前用了compiler模式才会报错，改为runtime模式就不会报错了，但本项目main.js里面本来就是runtime模式了，所以通过修改runtime的方法无法实现)
 *
 */
import Vue from 'vue'
import commonMinin from '../../mixin/commonMinin'
// import Vue from 'vue/dist/vue.esm.js'
export default {
  mixins: [commonMinin],
  data () {
    return {
      dialogVisible: false,
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  },
  mounted () {
    // 调用minix的方法
    console.log('sum', this.getSum())
  },
  methods: {
    btn1 () {
      this.dialogVisible = true
    },
    btn2 () {
      this.$Dialog({
        title: '接码价格波动趋势',
        content: 'KARMA基础版用户无法查看产品相关的价格波动趋势情况，如需体验该专业版功能请与您的责任销售联系，或者致电400-809-3699由我们为您分配。'
      })
    },
    btn3 () {
      this.$MessageTip({
        message: '哈哈哈',
        type: 'success'
      })
    },
    btn4 () {
      // 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象
      // 构建创造器
      var Profile = Vue.extend({
        template: '<h3>我是被extend构造出来的新组件</h3>',
        date: function () {
          return {
            message: '今天真热呀'
          }
        }
      })
      // 创建profile 实例，并挂载到一个元素上
      new Profile().$mount('#container')
    }
  }
}
</script>

<style lang="less" scoped>

</style>
